<template>
  <div class="table-layout">
    <a-table
      :columns="columnsList"
      :data-source="dataSources"
      :scroll="scroll"
      v-bind="tableProps"
      @change="handleChangeClick"
    >
      <template #headerCell="{ column }">
        <!-- 头部插槽 -->
        <slot name="headerCell" :column="column"></slot>
      </template>
      <template #bodyCell="{ column, record, index }">
        <!-- 内容插槽 -->
        <slot name="bodyCell" :column="column" :record="record">
          <!-- 判断类型是否是链接 -->
          <template v-if="column.type === 'link'">
            <span :style="bgColor(column, record)"
              ><a-tooltip :title="linkPath(column, record)">
                <a
                  type="link"
                  v-bind="{
                    href: linkPath(column, record),
                    target: column.LinkType == 'Inner' ? '_self' : '_blank',
                  }"
                >
                  {{ l(record[column.field]) }}</a
                >
              </a-tooltip></span
            >
          </template>
          <!-- 判断类型是否是序号 -->
          <template v-else-if="column.type === 'no'">
            <span :style="bgColor(column, record)">{{ currentNo(index) }}</span>
          </template>
          <!-- 判断类型是否是时间 -->
          <template v-else-if="column.type === 'datetime'">
            <span :style="bgColor(column, record)">{{ formatDate(column, record) }}</span>
          </template>
          <!-- 判断类型是否是数字 -->
          <template v-else-if="column.type === 'number'">
            <span :style="bgColor(column, record)">{{ formatNumber(column, record) }}</span>
          </template>
          <!-- 判断类型是否是开关 -->
          <template v-else-if="column.type === 'switch'">
            <span :style="bgColor(column, record)"
              ><a-switch v-model:checked="record[column.field]" disabled></a-switch
            ></span>
          </template>
          <!-- 判断是否是操作栏 -->
          <template v-else-if="column.type === 'action'">
            <template v-for="(item, index) in column.actions">
              <!-- 判断是否是下拉操作栏, 是否有权限，是否下拉框按钮 -->
              <template
                v-if="
                  item.type == 'select' &&
                  hasGranted(item.acl) &&
                  !isMenuButtonEmpty(item.buttons, column, record)
                "
              >
                <a-dropdown :key="index" placement="bottomLeft" class="btn-guttar">
                  <template #overlay>
                    <a-menu @click="handleMenuClick($event, record)">
                      <a-menu-item v-if="isMenuButtonEmpty(item.buttons, column, record)">{{
                        l('Personalized.NoData')
                      }}</a-menu-item>

                      <template v-for="i in item.buttons">
                        <!-- 是否有权限，自定义是否显示 -->
                        <a-menu-item
                          v-if="hasGranted(i.acl) && formatShowActionBtn(i, column, record)"
                          :key="i.name"
                        >
                          <a-button type="text">
                            {{ l(i.label) }}
                          </a-button>
                        </a-menu-item>
                      </template>
                    </a-menu>
                  </template>
                  <a type="link">
                    {{ l(item.label) }}
                    <DownOutlined />
                  </a>
                </a-dropdown>
              </template>
              <!-- 不是下拉框，是否有权限，自定义是否显示 -->
              <template
                v-else-if="
                  item.type != 'select' &&
                  hasGranted(item.acl) &&
                  formatShowActionBtn(item, column, record)
                "
              >
                <div :key="index" style="display: inline-block" class="btn-guttar">
                  <!-- 判断是否是删除 -->
                  <a-popconfirm
                    v-if="item.name == 'Delete'"
                    placement="top"
                    :ok-text="l('Ok')"
                    :cancel-text="l('Cancel')"
                    @confirm="handleBtnClick(item, record)"
                  >
                    <template #title>{{ l('ConfirmDeleteWarningMessage') }}</template>
                    <a
                      v-bind="{
                        type: 'link',
                        style: {
                          color: !!item.color ? item.color : '@primary-color',
                        },
                      }"
                      class="a-primary-color"
                    >
                      <svg
                        v-if="!!item.icon"
                        class="icon"
                        aria-hidden="true"
                        style="margin-right: 8px"
                      >
                        <use :xlink:href="`#${item.icon}`"></use>
                      </svg>
                      <span>{{ l(item.label) }}</span>
                    </a>
                  </a-popconfirm>
                  <a
                    v-else
                    v-bind="{
                      type: 'link',
                      style: {
                        color: !!item.color ? item.color : '@primary-color',
                      },
                    }"
                    @click.stop="handleBtnClick(item, record)"
                  >
                    <svg
                      v-if="!!item.icon"
                      class="icon"
                      aria-hidden="true"
                      style="margin-right: 8px"
                    >
                      <use :xlink:href="`#${item.icon}`"></use>
                    </svg>
                    <span>{{ l(item.label) }}</span>
                  </a>
                </div>
              </template>
            </template>
          </template>
          <!-- 其他 -->
          <template v-else>
            <span :style="bgColor(column, record)">{{ record[column.field] }}</span>
          </template>
        </slot>
      </template>
    </a-table>
    <!-- 表格下方操作栏 -->
    <g-dynamic-table-toolbar-bottom
      v-if="json.ifShowPersonalization"
      :json="json"
      :showExport="showExport"
      :showSelect="showSelect"
      class="bottom-toolbar-area"
      @action-click="handleActionClick"
    />
  </div>
</template>
<script lang="ts">
  import { defineComponent } from 'vue';
  import TableMixin from '../../mixins/table-mixin';
  export default defineComponent({
    name: 'g-dynamic-table-body',
    mixins: [TableMixin],
  });
</script>
<style lang="less" scoped>
  .table-layout {
    position: relative;
    .bottom-toolbar-area {
      margin-top: -32px;
      border-bottom: 1px solid #eaecef;
      position: absolute;
      left: 0;
    }
  }
  :deep(.ant-table) {
    padding-bottom: 50px;
  }
  :deep(.ant-table-cell) {
    padding: 9px 8px !important;
    height: 40px !important;
    line-height: 1.5;
    font-size: @font-size-base;
  }
  :deep(.ant-pagination-total-text) {
    color: @primary-color;
    margin-right: 20px;
  }
  :deep(.ant-table-pagination.ant-pagination) {
    position: absolute;
    right: 0;
    bottom: -18px;
  }
  :deep(.ant-pagination) {
    .ant-pagination-item-link,
    li {
      border: 0;
      border-radius: 4px;

      .ant-select-selector,
      input {
        border: 0;
        background: #f6f8fb;
        border-radius: 2px;
      }
    }
  }

  :deep(.ant-pagination-item-active) a {
    color: #ffffff;
    background-color: @primary-color;
    border-radius: 4px;
  }

  .btn-guttar {
    margin: 0 6px;
  }
  .ant-btn-text {
    border-width: 0;
    background: transparent;
  }
</style>
